<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>在线二维码生成</title>

		<style type="text/css">
			.box {
				width: 100%;
				height: 100%;
			}

			.title {
				text-align: center;
				border-bottom: 1px solid #666666;
				padding: 10px 0 16px;
			}

			.containor {
				width: 1000px;
				margin: 0 auto;
			}

			.input_ {
				width: 80%;
				border: 1px solid #dcdfe6;
				height: 27px;
				border-radius: 2px;
				letter-spacing: 1px;
				padding-left: 10px;
			}

			.input_:focus {
				outline: none;
				border: 1px solid #409eff;
			}

			.qr_box {
				width: 100%;
				height: 500px;
				display: flex;
				justify-content: center;
				align-items: center;
				border: 1px solid #DDDDDD;
				margin-bottom: 8px;
			}

			.rq_size {
				width: 100%;
				display: flex;
				flex-direction: row;
				align-items: center;
				margin: 10px 0 16px;
			}

			.rq_size input {
				width: 160px;
				padding-left: 10px;
				margin-right: 18px;
			}

			.btn {
				border: 0;
				background: #409eff;
				color: #fff;
				padding: 6px 15px;
				cursor: pointer;
				border-radius: 2px;
				margin: 0;
			}

			.btn:hover {
				box-shadow: 0 0 8px 0 rgb(232 237 250 / 60%), 0 2px 4px 0 rgb(232 237 250 / 50%);
				opacity: .8;
			}

			.btn:focus {
				outline: none;
			}

			.tit_ {
				display: inline-block;
				width: 136px;
				text-align: right;
			}

			.dow {
				display: flex;
				flex-direction: row-reverse;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<h2 class="title">在线生成二維碼</h2>
			<div class="containor">
				<span class="tit_">请输入需要地址：</span>
				<input id="text" class="input_" type="text" value="https://www.uuu0.cn/" /><br />
				<div class="rq_size">
					<span class="tit_" style="margin-right: 4px;">二维码大小：</span>
					宽：<input id="width" class="input_" type="text" value="150" placeholder="请输入宽(最大500)" />
					高：<input id="height" class="input_" type="text" value="150" placeholder="请输入高(最大500)" />
					<button id="btn" class="btn">生成</button>
				</div>
				<div id="qrcode" class="qr_box"></div>
				<div class="dow">
					<button id="btn_down" class="btn">下载</button>
				</div>

			</div>
		</div>
		<script src="https://cdn.bootcdn.net/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
		<script type="text/javascript">
			window.onload = function() {

				document.getElementById("btn").addEventListener('click', function() {
					let qr_w = document.getElementById('width').value
					let qr_h = document.getElementById('height').value

					var qrcode = new QRCode(document.getElementById("qrcode"), {
						width: qr_w,
						height: qr_h
					});

					if (qr_w > 500) {
						alert('二维码宽不能超过500')
						return false
					} else if (qr_w > 500) {
						alert('二维码搞不能超过500')
						return false
					}

					makeCode()

					function makeCode() {
						var elText = document.getElementById("text");

						if (!elText.value) {
							alert("Input a text");
							elText.focus();
							return;
						}

						qrcode.makeCode(elText.value);
					}
				})


				// 下载
				document.getElementById('btn_down').addEventListener("click", function() {

					let qrcode = document.getElementById("qrcode")
					var canvas = qrcode.querySelector('canvas'); //获取第一个canvas
					//　将canvas转为图片，方便后面下载
					let data = canvas.toDataURL('image/png').replace("image/png", "image/octet-stream");



					var link = document.createElement('a');

					link.download = 'qrCode.png'

					link.href = data;

					link.click()
				})


			}
		</script>
	</body>
</html>
